<template>
  <div>
    <image class="bacImg" :src="relayData.settings.poser_bg_image != ''?relayData.settings.poser_bg_image:relayData.settings.banner" alt=""></image>
    <div class="posterArea" >

      <!--    <div class="bacArea">
      &lt;!&ndash;      <img class="titleImg" src="../../static/relay/title.png" alt="">&ndash;&gt;
          </div>-->
      <div class="chooseArea">
        <div class="left" :class="{'leftNo':currentIndex==0}" @click="changeWord('left')"
             v-if="relayData.settings.poster_diagram.length != 0 && relayData.settings.poster_diagram.length != 1">
          <uni-icons type="back" size="35" :color="$store.state.mainColor"></uni-icons>
        </div>
        <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
                :current="currentIndex" v-if="relayData.settings.poster_diagram.length != 0" @change="changeIndex">
          <swiper-item  v-for="(item,index) in relayData.settings.poster_diagram">
            <div class="signLocation" :style="{background:$store.state.mainColor}">
              <div class="signImage">
                <img :src="item.image" alt="">
              </div>
              <div class="signName">
                - {{ item.text }} -
              </div>
            </div>
          </swiper-item>

          <!--              <swiper-item>
                          <div class="swiper-item uni-bg-green">
                            <span>
                              真心的祝福我们的祖国繁荣倡盛，使我们伟大的祖国讫立于世界的东方
                            </span>！</div>
                        </swiper-item>
                        <swiper-item>
                          <div class="swiper-item uni-bg-blue">
                            <span>永远跟党走，唱响中国梦。</span>
                          </div>
                        </swiper-item>-->
        </swiper>
        <div class="right" :class="{'rightNo':currentIndex==(relayData.settings.poster_diagram.length-1)}" @click="changeWord('right')"
             v-if="relayData.settings.poster_diagram.length != 0 && relayData.settings.poster_diagram.length != 1">
          <uni-icons type="forward" size="35" :color="$store.state.mainColor"></uni-icons>
        </div>
      </div >



      <div class="signInfo">
        <div class="signDetail">
          <div class="signIcon">
            <img :src="$store.state.formRelayData.icon" alt="">
          </div>
          <div class="signMine">
            <div class="signDetailCommon signName">姓名：{{$store.state.formRelayData.name}}</div>
            <div class="signDetailCommon signTime">生成时间：{{$store.state.formRelayData.timeStr}}</div>
          </div>
        </div>
        <div class="signWord">
          <div class="singTitle" :style="{color:$store.state.mainColor}">{{relayData.settings.compo_start_text}}</div>
          <div class="singTitleDetail">{{$store.state.formRelayData.word}}</div>
        </div>
      </div>
      <div class="posterButton" @click="savePoster('posterShow')">
        <image class="posterButtonImg" :mode="'widthFix'" :src="relayData.settings.poster_create_button" alt=""></image>
      </div>
    </div>
  </div>

</template>

<script>
import {mapState} from "vuex";
import {getRelayNumber} from "../../api/api";
import {strChange} from '@/until/tool'
export default {
  name: "relayPoster",
  data(){
    return{
      indicatorDots: false,
      autoplay: false,
      disable:true,
      currentIndex:0,
      posterList:[],
      swiperImg:'',
      swiperName:'',
      /*locationName:'人民大会堂'*/
      canClick:true,
    }
  },
  props:{
    relayData:{
      type:Object,
      default: {}
    }
  },
  computed:{
    ...mapState({
      basicData: state => state.basicData,
      qiniuUrl:state => state.qiniuUrl
    })
  },
  methods:{
    changeIndex(e){
      console.info(e)
      this.currentIndex = e.detail.current
      this.swiperImg = this.relayData.settings.poster_diagram[this.currentIndex].image
      this.swiperName = this.relayData.settings.poster_diagram[this.currentIndex].text
    },
    changeWord(type){
      if('right' == type){
        if(this.currentIndex+1 == this.relayData.settings.poster_diagram.length){
          return
        }else{
          let index = this.currentIndex
          this.currentIndex = index+1
          this.swiperImg = this.relayData.settings.poster_diagram[this.currentIndex].image
          this.swiperName = this.relayData.settings.poster_diagram[this.currentIndex].text
        }

      }else{
        if(this.currentIndex == 0){
          return;
        }else{
          this.currentIndex = this.currentIndex-1
          this.swiperImg = this.relayData.settings.poster_diagram[this.currentIndex].image
          this.swiperName = this.relayData.settings.poster_diagram[this.currentIndex].text
        }
      }
    },
    savePoster(type){
      console.info(this.canClick)
      if(!this.canClick){
          return;
      }
      this.canClick = false
      let data = {
        actid:uni.getStorageSync('actid'),
		    remarks:'姓名：'+this.$store.state.formRelayData.name+' | '+this.relayData.settings.compo_start_text+'：'+this.$store.state.formRelayData.word
      }
      getRelayNumber(data).then(res=>{
      if(res.code!=0){
        uni.showToast({
          title:res.text,icon:'none'
        })
        this.canClick = true
        return
      }
        console.info(res)
        if(''==this.relayData.settings.poser_bg_image){

        }
        let relayNum = strChange(this.relayData.settings.poster_play_num,res.data.play_num)
        let posterData = {
          /*背景图*/
          bacImg:this.relayData.settings.poser_bg_image !=''?this.relayData.settings.poser_bg_image:this.relayData.settings.banner,
          /*头图*/
          bacTitleImg:this.relayData.settings.web_banner,
          /*轮播图*/
          swiperImg:this.swiperImg,
          /*地址名*/
          swiperName:this.swiperName,
          /*头像*/
          icon:this.$store.state.formRelayData.icon,
          /*姓名*/
          name:this.$store.state.formRelayData.name,
          /*时间*/
          timeStr:this.$store.state.formRelayData.timeStr,
          /*心里话*/
          word:this.$store.state.formRelayData.word,
          /*第几位接力者*/
          posterNum:res.data.play_num,
          posterNumText:relayNum,
          /*指导单位*/
          guide:this.relayData.business_strip_tags,
          wordTips:this.$store.state.formRelayData.wordTips,
        }
        console.info(posterData)
        this.$emit('stepChange',type,posterData)
      })

    },
    changeClick(){
      this.canClick = true
      console.info(this.canClick)
    }
  },
  mounted() {
    console.info(this.relayData.settings.poster_diagram)
    if(0 != this.relayData.settings.poster_diagram.length){
      this.swiperImg = this.relayData.settings.poster_diagram[0].image
      this.swiperName = this.relayData.settings.poster_diagram[0].text
    }
    /*this.posterList = this.relayData.settings.poster_diagram*/
  }
}
</script>

<style scoped lang="scss">
@import 'scss/relay.scss';
body {
  /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.posterArea {
  min-height: 100vh;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-x: hidden;
  background-size: 100% 100% !important;
}
.bacArea {
  position: relative;
  width: 95%;
  height: 300rpx;
  margin: 0 auto;

  .titleImg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 888;
    animation: fadenum 5s;
    left: 50%;
    transform: translate(-50%, 0%) scale(1.25);
  }

  @keyframes fadenum {
    0% {
      left: 50%;
      transform: translate(-50%, 0%) scale(0);
    }
    100% {
      left: 50%;
      transform: translate(-50%, 0%) scale(1.25);
    }
  }

}
.chooseArea{
  margin: 280rpx auto 0 auto;
  display: flex;
  align-items: center;
  height: 606rpx;
  justify-content: center;
  .left{
    /*width: 25rpx;
    height: 45rpx;*/
  }
  .leftNo{
    opacity: 0.5;
  }
  .right{
    /*width: 25rpx;
    height: 45rpx;*/
  }
  .rightNo{
    opacity: 0.5;
  }
}
.swiper {
  width: 645rpx;
  height: 606rpx;
}
.signLocation{
  width: 97%;
  height: 580rpx;
  margin: 0 auto;
  /*background: #B51511;*/
  border-radius: 18rpx;
  opacity: 1;
  border: 1px solid #FCF8D2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .signImage{
    width: 100%;
    height: 450rpx;
    border-radius: 18rpx 18rpx 0 0 ;
    margin: 0 auto 0 auto;
    img{
      width: 100%;
      height: 100%;
      border-radius: 18rpx 18rpx 0 0 ;
    }
  }
  .signName{
    font-size: 40rpx;
    font-weight: bold;
    color: #FCF8D2;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.signInfo{
  width: 620rpx;
  background: #FCF8D2;
  box-shadow: 0px 6px 12px 1px rgba(0,0,0,0.16);
  border-radius: 18rpx;
  opacity: 1;
  padding: 24rpx 33rpx;
  box-sizing: border-box;
  margin: 15rpx auto 0 auto;
  .signDetail{
    display: flex;
    .signIcon{
      background: #666666;
      border-radius: 50%;
      width: 120rpx;
      height: 120rpx;
      margin: 0 24rpx 0 0;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .signMine{
      flex-grow: 1;
      .signDetailCommon{
        max-width: 100%;
        height: 48rpx;
        background: #F9D75D;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: 800;
        color: #222222;
        padding: 0 0 0 28rpx;
        display: flex;
        align-items: center;
      }
      .signName{
        margin: 0 0 18rpx 0;
      }
    }

  }
  .signWord{
    display: flex;
    align-items: center;
    margin: 33rpx 0 0 0;
    .singTitle{
      width: 120rpx;
      font-size: 30rpx;
      font-weight: 800;
      text-align: center;
      margin: 0 32rpx 0 0;
    }
    .singTitleDetail{
      font-size: 24rpx;
      font-weight: bold;
      color: #222222;
      width: 397rpx;
    }
  }
}
.posterButton{
  margin: 35rpx auto 50rpx auto ;
  max-width: 300rpx;
  animation: jelly 1s infinite;
  .posterButtonImg{
    width: 100%;
  }
}

</style>